<template>
    <div class="container">
        <!-- <router-link to="/main/renshi/renshizhidu" style="position: absolute;top:10px; left: 10px;">返回</router-link> -->
        <div style="display: flex;justify-content: space-between;width: 100%;">
            <el-button type="primary" @click="$router.push('/main/renshi/renshizhidu')"
                icon="el-icon-back">返回</el-button>

            <span>
                <el-button type="success" icon="el-icon-check" @click="saveData" v-if="!isView">保存</el-button>
                <el-button type="" icon="el-icon-menu" @click="goToList">列表</el-button>
                <!-- <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button> -->
                <el-button type="info" icon="el-icon-printer" @click="printPDF">PDF打印</el-button>
            </span>
        </div>
        <div id="pdf-container">
            <h1 style="margin: 20px;">外部联络函</h1>
            <p style="background-color: #ff000087; height: 10px;margin-bottom: 20px;"></p>
            <div style="display: flex;    justify-content: space-around;">
                <table>
                    <tr>
                        <td>
                            <div class="form-group">
                                <label>To (收件人单位):<input type="text" v-model="formData.toUnit"
                                        :disabled="isView" /></label>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label>From (发件人):<input type="text" v-model="formData.fromSender"
                                        :disabled="isView" /></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="form-group">
                                <label>Recipients (收件人):<input type="text" v-model="formData.recipients"
                                        :disabled="isView" /></label>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label>Data (发文日期):<input type="date" v-model="formData.issueDate"
                                        :disabled="isView" /></label>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div class="form-group">
                                <label>CC (副本抄送):<input type="text" v-model="formData.cc" :disabled="isView" /></label>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label>Number (编号):<input type="text" v-model="formData.letterNumber"
                                        :disabled="isView" /></label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="margin-left: 20px;">
                <label>
                    <p style="text-align: left;">Subject (主题):</p>
                    <textarea v-model="formData.subject" :disabled="isView"></textarea>
                </label>
            </div>

            <br />
            <p style="background-color: #ff000087; height: 10px;margin-bottom: 20px;"></p>
            <div
                style="white-space: nowrap;display: flex;justify-content: space-between;width: 1000px;margin-left: 20px;">
                <div style="text-align: left;">
                    Yu Da Fu Industrial Garden Xing Ye West Road,Sha Jing Town. BaoAn ShenZhen China <br>
                    公司地址:深圳市宝安区沙井街道兴业西路裕达富工业园<br>
                </div>
                <div style="text-align: right;">
                    Postalcode：518104 <br>
                    邮 编： 518104<br>
                </div>
            </div>
            <p style="width: 1000px;">
                TEL(电话):(0755)33866888 33860039 FAX
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;(传真)：<input type="text"
                    v-model="formData.fax" style="width: 16%;" :disabled="isView"> EXT(分机)：<input type="text"
                    v-model="formData.ext" style="width: 16%;" :disabled="isView">
            </p>
            <p>
                表单编号及版本：AM-JY-080 A/0&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                保存期限：长期
            </p>
        </div>
    </div>
</template>

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { getExternalContactLetterDetail, saveExternalContactLetter } from '@/api/externalContactLetter';

export default {
    data() {
        return {
            isView: false,
            isEdit: false,
            formData: {
                id: null,
                toUnit: '',
                fromSender: '',
                recipients: '',
                issueDate: '',
                cc: '',
                letterNumber: '',
                subject: '',
                fax: '',
                ext: ''
            }
        };
    },
    created() {
        // 获取路由参数
        const { id, type } = this.$route.query;
        if (id) {
            if (type === 'view') {
                this.isView = true;
            } else if (type === 'edit') {
                this.isEdit = true;
            }
            this.getDetail(id);
        }
    },
    methods: {
        async getDetail(id) {
            try {
                const response = await getExternalContactLetterDetail(id);
                if (response.data && response.data.code === 200) {
                    const data = response.data.data;
                    if (data) {
                        this.formData = data;
                    }
                } else {
                    this.$message.error(response.data?.message || '获取详情失败');
                }
            } catch (error) {
                console.error('获取详情失败：', error);
                this.$message.error('获取详情失败：' + error.message);
            }
        },
        goToList() {
            this.$router.push('/main/renshi/renshizhidu/wblianluod/wblianluodList')
        },
        validateForm() {
            if (!this.formData.toUnit) {
                this.$message.error('收件人单位不能为空');
                return false;
            }
            if (!this.formData.fromSender) {
                this.$message.error('发件人不能为空');
                return false;
            }
            if (!this.formData.recipients) {
                this.$message.error('收件人不能为空');
                return false;
            }
            if (!this.formData.issueDate) {
                this.$message.error('发文日期不能为空');
                return false;
            }
            return true;
        },
        async saveData() {
            if (!this.validateForm()) {
                return;
            }

            try {
                const response = await saveExternalContactLetter(this.formData);
                if (response.data && response.data.code === 200) {
                    this.$message.success('保存成功');
                    this.goToList();
                } else {
                    this.$message.error(response.data?.message || '保存失败');
                }
            } catch (error) {
                console.error('保存失败：', error);
                this.$message.error('保存失败：' + error.message);
            }
        },
        printPDF() {
            const doc = new jsPDF('p', 'pt', 'a4');
            const element = document.getElementById('pdf-container');
            const pageHeight = 841.89;
            let positionY = 0;

            html2canvas(element).then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                const imgWidth = 522;
                const imgHeight = (canvas.height * imgWidth) / canvas.width;

                if (positionY + imgHeight > pageHeight) {
                    // 如果当前图片超出页面高度，添加新页面
                    doc.addPage();
                    positionY = 0;
                }

                doc.addImage(imgData, 'PNG', 40, positionY, imgWidth, imgHeight);
                positionY += imgHeight; // 添加一些间距

                doc.save('外部联络函.pdf');
            });
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 30px;

    font-family: '宋体', sans-serif;
    padding: 20px;
     background-color: #f9f9f9; 
    border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    width: 1050px;
    margin: 0 auto;
    min-height: 100vh;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    /* 加粗表单标签 */
    font-size: 20px;
}

input {
    /* margin-bottom: 10px; */
    width: 300px;
    border: 0px;
    outline: none;
    background-color: transparent;
}

textarea {
    width: 1050px;
    height: 800px;
    border: 0px;
    font-family: '宋体';
    padding: 10px;
    font-size: 18px;
    outline: none;
}

/* button {
    margin-top: 10px;
    padding: 5px 10px;
    cursor: pointer;
} */

.form-group {
    display: flex;
    margin-right: 40px;
}

input:disabled,
textarea:disabled {
    color: #606266;
    cursor: not-allowed;
}
</style>